


    <!-- Main Content Section -->

    <div style="max-width: 1200px; margin: 0 auto; padding-top: 10px" 
         ng-init="init()">

       <!--  <textarea style="width:700px" rows="12" ></textarea> -->

<!--  inlined template for the component -->
      

      <hr>
      

      <div class="row">

        <div class="span4">
           <h5 class="titleSpecial hidden-phone">Filter by Category:</h5> 
          <select ng-model="filterCategorySelected" ng-options="c.label  for c in todosCategories">
          </select>
        </div>

        <div class="span4">
            <h5 class="titleSpecial hidden-phone">by Owner:</h5> 
          <select ng-model="filterOwnerSelected" ng-options="c.displayedName  for c in config.users">
            <option value="">All owners</option>
          </select><br/>
        </div>

        <div class="span3">
          <h5 class="titleSpecial hidden-phone">by Prority:</h5> 
          <select ng-options="p as p.label for p in priorities" 
                  ng-model="filterProprity"
                  >
                  <option value="">All priorities</option>
          </select> 

         <!--  <select ng-model="filterProprity">
            <option value="">All priorities</option>
            <option>0</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
          </select> -->

        </div>

        

      </div>

      <hr>



     <!--  <label>{{filterCategorySelected.value}}</label> -->


       <!-- SHOW OPENED TODO -->
       <!-- LOOP TODO CATEGORIES -->
        <div class="row cmsRow">
      
        <div class="span0">
           <h3>OPENED TODOS</h3>
        </div>
        
          <div style="float:right">

            <!-- ADD NEW CAT -->
            <img src="images/icon/black_with_circle/Add.png"
                 ng-click="addTodoCategoryDialog()"
                  tooltip-placement="bottom" tooltip="Add a new category">

             <!-- HELP -->
             <img src="images/icon/black_with_circle/Help.png"
                  ng-click="openHelp()"
                  tooltip-placement="bottom" tooltip="Open the Tip&Tricks panel">
           </div>
        </div>



        <div ui-sortable="sortableOptions" ng-model="todos">

          <div class="row-fluid cmsTodoCategoryPanel"  
               ng-repeat="cat in todos | filter: {catLabel: filterCategorySelected.value}"
               >

            
            <div class="content" >
              <!-- CATEGORY NAME -->

               <h3 class="muted titleSpecial" >{{cat.catLabel}}

                  <!-- ADD NEW TODO -->
                <img src="images/icon/black/Add.png" class="cmsTodoIcon"
                 ng-click="addTodo(cat, $index)"
                 tooltip-placement="bottom" tooltip="Add a new todo in this category">

                 <img src="images/icon/black/Cancel.png" class="cmsTodoIcon"
                 ng-click="removeCategory(cat, $index)"
                 tooltip-placement="bottom" tooltip="Remove this category and all its todos">
                


               </h3>
              
              <div ui-sortable="sortableOptions" ng-model="cat.opened">
                  <!-- LOOP TODO IN CATEGORY -->
                  <div ng-repeat="todo in cat.opened | filter: {ownerId: filterOwnerSelected.id, priority: filterProprity.index }"
                  style="padding-top: 5px">

                    <!-- CHECKBOX -->
                    <input type="checkbox" name="checkbox" 
                           value="value" ng-model="status"
                           ng-change="changeTodoStatus(todo, $index, $parent.$index)"
                            /> 

                    <!-- LINK  -->
                    

                      <!-- IN-LINE EDITING -->
                      <inline-edit model="todo" owner="todo.ownerId" 
                                   ownerdisplayname="todo.ownerName" 
                                   users="config.users"
                                   priorities="priorities"
                                   update="updateTodo(todo, $index, $parent.$index, todo.ownerName)"
                                   cancel="cancelTodo(todo, $index, $parent.$index)"
                                   remove="removeTodo(todo, $index, $parent.$index)"
                                   >
                      </inline-edit>

                       <!--     <select ng-show="true"  ng-model="filterCategorySelected" ng-options="c.label  for c in todosCategories">
                <option>fefe</option>
                  </select> -->
                  
                    
              </div>

        
          </div>
      </div>
    </div>
<!--   </div> -->


       <hr>

       <!-- SHOW COMPLETED TODO -->
       <h3>COMPLETED TODOS</h3>
      
      <!-- LOOP TODO CATEGORIES -->
      <div class="row-fluid cmsTodoCompletedCategoryPanel" >

        
        <div  ng-repeat="cat in todos">
          <div class="content"  ui-if="cat.completed.length > 0">

              <!-- CATEGORY NAME -->        
              <h4 class="muted titleSpecial" >{{cat.catLabel}}</h4>
              
              <!-- LOOP TODO IN CATEGORY -->
              <div ng-repeat="todo in cat.completed | filter: {ownerId: filterOwnerSelected.id, priority: filterProprity }">

                <!-- CHECKBOX -->

                <input type="checkbox" name="checkbox" 
                      value="value"  ng-model="status"
                       ng-change="changeTodoCompletedStatus(todo, $index, $parent.$index)" /> 

                <!-- LINK  -->

                <a href="#/todos/111" style="text-decoration: none"> 
                  {{todo.ownerName}} - 
                 {{ todo.title}}
                  <!-- IN-LINE EDITING -->
                  <!-- <inline-edit model="todo.name" 
                               update="updateTodo(todo.id, todo.name)"
                               cancel="cancelTodo(todo.id)">
                  </inline-edit> -->
                </a>
              </div>


          </div>
        
        </div>


      </div> <!-- end BUG CATEGORY BLOCK -->

      

      <hr>

      

      <div id="footer">
        <div>
          <p class="muted credit" style="">Angular PM - <a href="http://www.fabiobiondi.com">Fabio Biondi</a> and <a href="http://www.wasabit.it/">Thomas Dolso</a>.</p>
        </div>
      </div>

    </div> <!-- /container -->



  
  <!-- TEMPLATE DIALOG "ADD NEW CATEGORY" -->
<script type="text/ng-template" id="todoAddCategory.html">
      
<div class="modal-header">
  <h1 class="titleSpecial">Add new category</h1>
  </div>
  <div class="modal-body">
  <p>Enter the category name <input ng-model="result" /></p>
  </div>
  <div class="modal-footer">
  <button ng-click="close(result)" class="btn btn-primary" >Save</button>
  <button ng-click="clear()" class="btn" >Cancel</button>
</div>

</script>

<script type="text/ng-template" id="todoListHelp.html">
      
<div class="modal-header">
  <h1 class="titleSpecial">Todo Tip&Tricks</h1>
  </div>
  <div class="modal-body">
  <ul>
  <li>- Double click the titles of the todos to quick edit them</li>
  <li>- Drag to move todo and categories </li>    
  <li>- Assign a todo to a user (and email is automatically sent to him) </li>
  <li>- Assign a priority </li>
  <li>- Filter todos by owner, priority and categories</li>
  </ul>
  </div>
  <div class="modal-footer">
</div>

</script>


  
<!-- TEMPLATE DIRETTIVA TODO inlineEdit -->
<script type="text/ng-template" id="componentTpl.html">
      

  <span ng-dblclick="editMode=true;
                     value=model.title; 
                     sourceValue = model.title;
                     originalPriority = model.priority;">
      
      <!-- PRIORITY -->
      <span class="cmsTodoPriorityMini"
            ng-class="getPriorityClass(model.priority.index)"
            tooltip-placement="bottom" 
            tooltip="Priority">  {{model.priority.label}}</span>
      
   
      <span ng-hide="editMode" >{{model.title}}
          <strong ng-show="!editMode"> | {{ownerdisplayname}}  | </strong>


         
          <a href="#/todos/{{model.id}}" style="text-decoration: none">
          
            <img src="images/icon/black_mini/Align-left.png"  
                     ng-click="addTodo(cat, $index)"
                     ng-show="model.commented"
                     tooltip-placement="bottom" 
                     tooltip="{{model.comments}} comments">

            <img src="images/icon/black_mini/Paperclip.png" 
                     ng-click="addTodo(cat, $index)"
                     ng-show="model.attach"
                     tooltip-placement="bottom" 
                     tooltip="There are some attachments">


          </a>

      </span>


      <textarea  ng-model="value" ng-show="editMode" 
                 ng-model-instant ng-enter="editMode=false" 
                 ng-change="onChangeInputText(); model.title = value"
                 rows="3" 
                 style="width: 50%; padding-top:" 
                 placeholder="Add your text"/>

      <br ng-show="editMode" >
    </span>

  

    <div  ng-show="editMode"
    style="border-bottom: 1px dotted #ccc ">
          
          Owner
          <select ng-options="user as user.displayedName for user in users" 
              ng-model="selectedOwner"
              ng-change="getOwner($event); "
               style="width: 170px; margin-top: 5px"
              >
          </select> 


         Priority
          <select ng-options="p as p.label for p in priorities" 
                ng-model="model.priority"
                ng-change="setPriority($event); "
                style="width: 110px; margin-top: 7px"
                >
          </select> 

          

            <img src="images/icon/black_mini/Apply.png" 
                 class="cmsTodoNewAddIcon"
                 ng-click="update(); editMode=false" >

            <img src="images/icon/black_mini/Back-button_grey.png"
                 class="cmsTodoNewAddIcon"
                 ng-click="cancel(); model.priority= originalPriority;
                               editMode=false; model.title = sourceValue">  

            <img src="images/icon/black_mini/Delete_red.png" 
                 class="cmsTodoNewAddIcon"
                 tooltip-placement="bottom" tooltip="Remove Todo"
                 ng-click="remove();" >
     </div>
           
</span>

</script>
